<template>
    <div>
        <el-dialog title="总部仓库管理" class="noselect" v-drag :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm" >
                <el-form-item label=" " prop="no"  :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
                <el-input  size='medium' placeholder="请输入名称" v-model="modelForm.no" :maxLength="5">
                        <template slot="prepend">
                            <el-tooltip placement="top" content="请填名称">
                                <el-button tabIndex="-1">名称</el-button>
                            </el-tooltip>
                        </template>
                    </el-input>
                    <div class="text-left" style="font-size:13px;color:#ccc">卡类型名称;例:钻石卡、金卡、银卡.</div>
                </el-form-item>
                <el-form-item label=" " prop="name">
                    <div style="display:flex">
                    <div class="el-from-item_title text-left" style="width:120px">微会员</div>
                    <div class="el-from-item_content text-left" style="margin-left:20px;width:80px">
                        <el-switch
                            v-model="modelForm.hasVipPrice"
                             on-color="#13ce66"
                             off-color="#ff4949"
                             on-text="是"
                             off-text="否">
                        </el-switch>
                    </div>
                    <div style="font-size:12px;color:#ccc;float:right">开启微会员，该会员类型默认为微信注册会员类型。</div>
                    </div>
                </el-form-item>
                <el-form-item label=" " prop="powerModel">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">适用门店</div>
                        <el-select class="el-cascader-margin w-100p" v-model="modelForm.powerModel" placeholder="请选择适用门店">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            size="medium"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label=" ">
                        <div class="el-from-item_title">折扣方案</div>
                        <div class="el-from-item_content text-left" style="margin-left:80px">
                        <el-radio-group v-model="modelForm.attribute">
                            <el-radio label="1" value="无折扣">无折扣</el-radio>
                        </el-radio-group>
                        </div>
                </el-form-item>
                <el-form-item label=" " prop="name">
                    <div style="display:flex">
                    <div class="el-from-item_title text-left" style="width:120px">会员价</div>
                    <div class="el-from-item_content text-left" style="margin-left:20px;width:80px">
                        <el-switch
                            v-model="modelForm.hasVipPrice"
                             on-color="#13ce66"
                             off-color="#ff4949"
                             on-text="是"
                             off-text="否">
                        </el-switch>
                    </div>
                    <div style="font-size:12px;color:#ccc;float:right">开启会员价则使用该类型卡的会员将享受全部会员价商品</div>
                    </div>
                </el-form-item>
                <el-form-item label=" " prop="name">
                    <div style="display:flex">
                    <div class="el-from-item_title" style="width:120px">启用消费返积分</div>
                    <div class="el-from-item_content text-left" style="margin-left:20px;width:80px">
                        <el-switch
                            v-model="modelForm.hasVipPrice"
                             on-color="#13ce66"
                             off-color="#ff4949"
                             on-text="是"
                             off-text="否">
                        </el-switch>
                    </div>
                    <div style="font-size:12px;color:#ccc;float:right">开启消费返积分功能，该类型卡的会员结账按照下面规则返积分。</div>
                    </div>
                </el-form-item>
                <el-row v-if="modelForm.hasVipPrice">
                    <el-col :span="11">
                        <el-form-item style="margin-right:0px" label=" " prop="consumePrice" :rules="[ rules.numPot2,{ required: true, message: '请选择折扣方案', trigger: 'blur',type:'number'}]">
                            <el-input placeholder="请输入消费金额" v-model.number="modelForm.consumePrice" @blur="isDouble(modelForm,'consumePrice')">
                                <template slot="prepend">
                                    <el-button tabIndex="-1">消费金额</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                       <div class="text-center" style="height: 100%;line-height: 30px">返</div>
                    </el-col>
                    <el-col :span="11">
                        <div>
                            <el-form-item style="margin-left: -100px" prop="giftPoint" :rules="[rules.numPot2, { required: true, message: '请选择折扣方案', trigger: 'blur',type:'number'}]">
                                <el-input placeholder="请输入赠送积分" v-model.number="modelForm.giftPoint" @blur="isDouble(modelForm,'giftPoint')">
                                      <template slot="prepend">
                                          <el-button tabIndex="-1">赠送积分</el-button>
                                      </template>
                                  </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-form-item label=" " prop="name">
                    <div style="display:flex">
                    <div class="el-from-item_title text-left" style="width:120px">启用充值规则</div>
                    <div class="el-from-item_content text-left" style="margin-left:20px;width:80px">
                        <el-switch
                            v-model="modelForm.hasVipPrice"
                             on-color="#13ce66"
                             off-color="#ff4949"
                             on-text="是"
                             off-text="否">
                        </el-switch>
                    </div>
                    <div style="font-size:12px;color:#ccc;float:right">开启充值规则功能，该类型会员卡在充值时按照以下规则返还。</div>
                    </div>
                </el-form-item>
                <el-form-item label=" " prop="powerModel" v-if="modelForm.hasVipPrice">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">充值规则</div>
                        <el-select class="el-cascader-margin w-100p" v-model="modelForm.powerModel" placeholder="请选择充值规则">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            size="medium"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-row v-for="(item,index) in modelForm.topupRules"  v-if="modelForm.hasVipPrice" style="margin-bottom: 5px">
                    <el-col v-if="modelForm.rechargeType=='FIXEDCASHBACK'" :span="2">
                    </el-col>
                    <el-col :span="3">
                        <div style="height: 100%;line-height: 30px;z-index: 10" class="text-center">
                            <span class="el-icon-plus" style="cursor: pointer;font-size: 10px;padding-right: 5px" @click="addColumn(index)"></span>
                            <span class="el-icon-minus" style="cursor: pointer;font-size: 10px;padding-left: 5px" @click="minusColumn(index)"></span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item style="margin-left:0px;margin-right:0" class="clearFormMargin" :prop="'topupRules.' + index + '.rangeStart'" :rules="[{
                             required: true, message: '必填信息', trigger: 'blur',type:'number'
                        },rules.numPot2]">
                            <el-input placeholder="100" @blur="isDouble(item,'rangeStart')" v-model.number="item.rangeStart">
                                <el-button slot="append">元</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1" v-if="modelForm.rechargeType!='FIXEDCASHBACK' && modelForm.rechargeType!=''"><div style="height: 100%;line-height: 30px" class="text-center">至</div></el-col>
                    <el-col :span="4" v-if="modelForm.rechargeType!='FIXEDCASHBACK' && modelForm.rechargeType!=''">
                        <el-form-item style="margin-left:0px;margin-right:0" class="clearFormMargin" :prop="'topupRules.' + index + '.rangeEnd'" :rules="[{
                             required: true, message: '必填信息', trigger: 'blur',type:'number'
                        },rules.numPot2]">
                            <el-input placeholder="1000" @blur="isDouble(item,'rangeEnd')" v-model.number="item.rangeEnd">
                                <el-button slot="append">元</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"><div style="height: 100%;line-height: 30px" class="text-center">返现</div></el-col>
                    <el-col :span="4">
                        <el-form-item style="margin-left:0px;margin-right:0" class="clearFormMargin" :prop="'topupRules.' + index + '.giftMoney'" :rules="[{
                             required: true, message: '必填信息', trigger: 'blur',type:'number'
                        },rules.numPot2]">
                            <el-input placeholder="10" @blur="isDouble(item,'giftMoney')" v-model.number="item.giftMoney">
                                <el-button slot="append">元</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <div>
                        <el-col :span="1">
                            <div style="height: 100%;line-height: 30px;font-size: 18px" class="text-center">
                            +
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item style="margin-left:0px;margin-right:0" class="clearFormMargin" :prop="'topupRules.' + index + '.giftPoint'" :rules="[{
                             required: true, message: '必填信息', trigger: 'blur',type:'number'
                             },rules.numPot2]">
                                <el-input placeholder="100" @blur="isDouble(item,'giftPoint')" v-model.number="item.giftPoint">
                                    <el-button slot="append">积分</el-button>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-row>
            </el-form>
                        <div class="foot-bar-button">
                            <el-button type="primary" size="medium" @click="submitForm('modelForm')">提交</el-button>
                            <el-button @click="resetForm('modelForm')"  size="medium">取消</el-button>
                        </div>
        </el-dialog>
    </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "id"], //参数
  data() {
    return {
      modelForm: {
        hasVipPrice: false,
        topupRules: [
          {
            rangeStart: "",
            rangeEnd: "",
            giftMoney: "",
            giftPoint: ""
          }
        ]
      },
      showDialog: false,
      activityId: "",
      isSave: true,
      states: [],
      value2: true
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.$axios
            .get("stores/warehouses/" + this.activityId + "/update")
            .then(data => {
              this.modelForm = data.content.warehouse;
              this.states = data.content.states;
            });
        } else {
          this.isSave = true;
          this.$axios.get("stores/warehouses/create").then(data => {
            this.modelForm = data.content.warehouse;
            this.states = data.content.states;
          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    addColumn(index) {
      this.modelForm.topupRules.splice(index + 1, 0, {
        rangeStart: "",
        rangeEnd: "",
        giftMoney: "",
        giftPoint: ""
      });
    },
    minusColumn(index) {
      if (this.modelForm.topupRules.length > 1) {
        this.modelForm.topupRules.splice(index, 1);
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isSave) {
            this.$axios
              .post("stores/warehouses/create", this.modelForm)
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          } else {
            this.modelForm._method = "PUT";
            this.$axios
              .put(
                "stores/warehouses/" + this.activityId + "/update",
                this.modelForm
              )
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    }
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
</style>
